<template>
  <div class="note-list">
    <el-empty v-show="!tableData.length" description="暂无笔记"></el-empty>
    <div class="note-item" v-for="item in tableData" :key="item.id">
      <div class="note-user">
        <el-avatar size="small" :src="headImg(item.sysUser)"></el-avatar>
        <span>{{ item.sysUser.userName }}</span>
      </div>
      <div class="note-content">
        <p v-show="current.id != item.id">{{ item.contents }}</p>
        <el-form label-width="0px" v-show="current.id == item.id">
          <el-form-item label="">
            <el-input
              type="textarea"
              v-model="current.contents"
              :rows="6"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSave" size="small"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="note-info" v-show="current.id != item.id">
        <el-row :gutter="20">
          <el-col :span="12" class="note-info-left">
            <span>{{ item.createTime }}</span>
            <span v-show="!isQuote(item) && item.isOpen == 1">已公开</span>
            <span v-show="!isQuote(item) && item.isOpen != 1">未公开</span>
            <span v-show="isQuote(item)">引用</span>
          </el-col>
          <el-col :span="12" class="note-btns">
            <span
              class="el-icon-edit"
              @click="handleEdit(item)"
              v-if="!isQuote(item)"
            >
              编辑</span
            >
            <span
              class="el-icon-view"
              v-show="item.isOpen != 1"
              @click="handleOpen(item, 1)"
              v-if="!isQuote(item)"
            >
              公开笔记
            </span>
            <span
              class="el-icon-view"
              v-show="item.isOpen == 1"
              @click="handleOpen(item, 0)"
              v-if="!isQuote(item)"
            >
              隐藏笔记
            </span>
            <span class="el-icon-delete" @click="handleDelete(item)">
              删除
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { sysCourseNotesClickUnQuote } from '@/api/admin/course/sysCourseNotes.js'
import { cloneDeep } from 'lodash'
import setInfo from '@/mixins/setInfo'
export default {
  mixins: [setInfo],
  data() {
    return {
      current: {},
      userId: this.$store.getters.userId,
      listQuery: {
        page: 1,
        limit: 100,
        courseId: '',
        resId: '', //章节id
        resType: '1', //资源类型（1-章）
        my: this.$store.getters.userId,
      },
      tableData: [],
    }
  },
  computed: {
    //是否是采集笔记
    isQuote() {
      return (v) => v.quoteUserList.includes(this.userId)
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.getList()
      },
    },
  },
  mounted() {
    this.$bus.$on('getMyNoteList', () => {
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('getMyNoteList')
  },
  methods: {
    async getList() {
      let { id, cId } = this.$route.query
      this.listQuery.courseId = id
      this.listQuery.resId = cId
      let res = await this.$store.dispatch(
        'querySysCourseNotes',
        this.listQuery,
      )
      this.tableData = res.data
    },
    //编辑
    handleEdit(row) {
      this.current = cloneDeep(row)
    },
    //取消
    handleCancel() {
      this.current = {}
    },
    //保存
    async handleSave() {
      let { id, contents } = this.current
      let obj = { id, contents }
      await this.$store.dispatch('updateSysCourseNotes', obj)
      this.current = {}
      this.getList()
    },
    //公开|隐藏
    async handleOpen(row, isOpen) {
      let obj = {
        id: row.id,
        isOpen,
      }
      await this.$store.dispatch('updateSysCourseNotes', obj)
      this.getList()
    },
    //删除
    handleDelete(row) {
      this.deleteTips(() => {
        row.quoteUserList.includes(this.userId)
          ? this.unQuote(row)
          : this.delete(row)
      }, '删除后将无法恢复，请谨慎操作。')
    },
    async delete(row) {
      await this.$store.dispatch('deleteSysCourseNotes', row.id)
      this.getList()
    },
    //取消引用
    unQuote(row) {
      sysCourseNotesClickUnQuote(row.id).then((res) => {
        this.getList()
      })
    },
  },
}
</script>
<style scoped lang="scss">
.note-list {
  .note-item {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    &:last-child {
      border-bottom: 0 none;
    }
    .note-user {
      font-size: 14px;
      color: #666;
      height: 28px;
      line-height: 28px;
      span {
        float: left;
        margin-right: 10px;
      }
    }
    .note-content {
      color: #333;
      padding: 10px 0;
      line-height: 22px;
      text-align: justify;
    }
    .note-info {
      .note-info-left {
        span {
          color: #9199a1;
          margin-right: 10px;
        }
      }
      .note-btns {
        text-align: right;
        span {
          color: #717a84;
          margin-left: 10px;
          cursor: pointer;
          &:hover {
            color: #444;
          }
        }
      }
    }
  }
}
</style>